<template>
  <el-tooltip :effect="effect" :placement="placement">
    <template slot="content">
      <slot name="content">{{ tip }}</slot>
    </template>
    <el-button class="tooltip_button" :class="{ 'hover-style': hoverStyle }" v-bind="buttonProps" v-on="$listeners">
      <slot />
    </el-button>
  </el-tooltip>
</template>
<script>
export default {
  name: 'TooltipButton',
  props: {
    effect: {
      type: String,
      default: () => 'dark'
    },
    placement: {
      type: String,
      default: () => 'top'
    },
    tip: {
      type: String,
      default: () => ''
    },
    // 摸上去高亮样式
    hoverStyle: {
      type: Boolean,
      default: () => false
    }
  },
  computed: {
    buttonProps() {
      const { ...btnProps } = this.$attrs
      // 默认size为mini
      return { size: 'mini', ...btnProps }
    }
  }
}
</script>
<style scoped lang="less">
.tooltip_button {
    // 默认点击区域20*20
    width: 20px;
    height: 20px;
    padding: 0;
}

.tooltip_button.hover-style {
    font-size: 14px;
    color: #4c6f88;

    i.el-icon-delete {
        font-size: 16px;
        font-weight: 600;
    }

    &:hover {
        color: #005ee0;
    }
}
</style>
